<template>
  <div id="myZheXinTU" :style="{width: '100%', height: '400px'}"></div>
</template>
<script>
import { getAction } from '@/api/manage'
export default {
  name: 'zhexiantu',
  components: {
  
  },
  data() {
    return {
      msg: 'Welcome to Your Vue.js App',
      time:[],
    }
  },
  mounted() {
    this.initLogInfo()

  },
  // beforeUpdate(){
  //  this.initLogInfo()
  // },
  // created() {
  //   this.initLogInfo();
  // },
  methods: {
    // 以下为折线图
    initLogInfo () {
        getAction("/payChart/merchant/bottomMonth").then(res =>{
          let dataKey
          let shopName = []
          let shopData = {}
          let sourceData = []
          let date = []
          let data = []
            if(res.success){
              for(let key in res.data){
                shopName.push(key)
                dataKey = res.data[key]
                for(let i = 0; i < dataKey.length; i++){
                  for(let k in dataKey[i]){
                    date.push(k)
                    data.push(dataKey[i][k] / 100)
                    shopData = {name:key,type:'line',stack:k,data:data}
                    sourceData.push(shopData)
                  }
                }

              }
              // console.log("shopName：" + shopName)
              // console.log("sourceData：" + sourceData)
              this.drawLine(shopName,date,sourceData);
               
            }
        })
    },
    // 以上为折线图
    drawLine(shopName,date,sourceData) {
      // 基于准备好的dom，初始化echarts实例
      let myZheXinTU = this.$echarts.init(document.getElementById('myZheXinTU'))
        myZheXinTU.setOption({
        title: {
            text: '折线图堆叠'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: shopName
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: date
        },
        yAxis: {
            type: 'value'
        },
        series: sourceData
    })
  }
  }
}
</script>

<style scoped>

</style>